<template>
      <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>选择体检日期</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="date-box">
                <i class="fa fa-caret-left" @click="subtractMonth"></i>
                <p>{{ currYear }}年{{ currMonth }}月</p>
                <i class="fa fa-caret-right" @click="addMonth"></i>
            </div>
            <table>
                <tr>
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                </tr>
            </table>
            <ul>
                <li v-for="(ca, index) in calanedarArr" :key="ca.ymd" @click="selected(index)">
                    <p
                        :class="{ fontcolor: ca.remainder != null && ca.remainder != 0, pselect: ca.remainder != null && ca.remainder != 0 && ca.isSelected == 1 }">
                        {{ ca.day }}
                    </p>
                    <p>{{ ca.remainder != null && ca.remainder != 0 ? "余" + ca.remainder : "" }}</p>
                </li>
                <!--<li>
                    <p class="fontcolor pselect">18</p>
                    <p>余56</p>
                </li>
                <li>
                    <p class="fontcolor">19</p>
                    <p>余66</p>
                </li>-->
            </ul>
        </section>

        <div class="bottom-btn">
            <div></div>
            <div @click="toConfirmOrder">下一步</div>
        </div>

        <div class="bottom-ban"></div>
        <Footer></Footer>
    </div>

</template>

<script>
import { reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
export default {
    setup() {
        const router = useRouter();
        const route = useRoute();

        //获取当前日期
        const currDate = new Date();
        const state = reactive({
            hpId: route.query.hpId,
            smId: route.query.smId,
            currYear: currDate.getFullYear(),
            currMonth: currDate.getMonth() + 1,
            calanedarArr: [],
            selectedDay: ""

        });
        //初始化日历界面数据的函数
        function loadCalendar() {
            axios
                .post("/api/listCalendar", { hpId: state.hpId, year: state.currYear, month: state.currMonth }) //  localhost:8080/login/userId=?&password=?
                .then((response) => {
                    state.calanedarArr = response.data.data;
                    for (let i = 0; i < state.calanedarArr.length; i++) {
                        if (state.calanedarArr[i].ymd != null && state.calanedarArr[i].ymd != "") {
                            state.calanedarArr[i].day = state.calanedarArr[i].ymd.substring(8)
                        }

                    }
                    //加一个selected属性控制样式
                    for (let y = 0; y < state.calanedarArr.length; y++) {
                        if (state.calanedarArr[y].ymd != null) {
                            state.calanedarArr[y].isSelected = 0; //默认未选中
                        }
                    }
                })
                .catch(function (error) {
                    // 请求失败处理
                    console.log(error);
                });

        }
        function subtractMonth() {
            if (state.currMonth > 1) {
                state.currMonth--;
            } else {
                state.currYear--;
                state.currMonth = 12;
            }
            //界面要变，所以还要再加载一次页面
            loadCalendar();

        }
        function addMonth() {
            if (state.currMonth < 12) {
                state.currMonth++;
            } else {
                state.currYear++;
                state.currMonth = 1;
            }
            //界面要变，所以还要再加载一次页面
            loadCalendar();


        }
        function selected(index) {
            //把选中日期存起来
            state.selectedDay = state.calanedarArr[index].ymd
            //给选中日期添加样式
            for (let y = 0; y < state.calanedarArr.length; y++) {
                state.calanedarArr[y].isSelected = 0;
            }
            state.calanedarArr[index].isSelected = 1;

        }
        function toConfirmOrder() {
            if (state.selectedDay == "") {
                alert("请先选择体检日期");
                return;
            }
            //如果当天预约，要抛出异常（还未成功）
            // 从sessionStorage获取用户信息
            
            const user = JSON.parse(sessionStorage.getItem('jinandaxueuser'));
            console.log("选择的日期:", state.selectedDay);
            console.log("用户ID:", user.userId);
            
            
            // 使用POST方法调用接口
            axios.post('/api/checkUserDateOrder', {
                userId: user.userId,  // 使用从session获取的真实用户ID
                orderDate: state.selectedDay  // 确保日期格式正确
            })
                .then(response => {
                    // 检查响应中是否包含错误信息
                    if (response.data && response.data.status !== 200) {
                        alert(response.data.desc || "预约失败");
                        return;
                    }
                    
                    router.push({
                        path: '/ConfirmOrderView',
                        query: {
                            hpId: state.hpId,
                            smId: state.smId,
                            selectedDay: state.selectedDay
                        }
                    });
                })
                .catch(error => {
                    console.error("预约检查错误:", error);
                    alert(error.response?.data?.desc || "您这一天已经预约");
                });
        }
            //router.push({ path: '/ConfirmOrderView', query: { hpId: state.hpId, smId: state.smId, selectedDay: state.selectedDay } });
    
        loadCalendar();

        return {
            ...toRefs(state),
            loadCalendar,
            subtractMonth,
            addMonth,
            selected,
            toConfirmOrder,
        }
    }
}
</script>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

/*********************** header ***********************/
header {
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}

header .fa {
    font-size: 8vw;
}

/*********************** common样式 ***********************/
.top-ban {
    width: 100%;
    height: 15.7vw;
}

.bottom-ban {
    width: 100%;
    height: 14.2vw;
}

/*********************** section ***********************/
section {
    width: 82vw;
    margin: 0 auto;
    margin-top: 12vw;
}

section .date-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.5vw;
    font-weight: 600;
}

section .date-box p {
    color: #000;
}

section .date-box i {
    color: #999;
    user-select: none;
    cursor: pointer;
}

section table {
    width: 100%;
    font-size: 3.8vw;
}

section table tr th {
    text-align: center;
    font-weight: 600;
    line-height: 12vw;
}

section ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

section ul li {
    width: 14.28%;
    height: 12vw;
    font-weight: 600;
    color: #999;
}

section ul li p:first-child {
    width: 6vw;
    height: 6vw;
    margin: 0 auto;
    border-radius: 3vw;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 4.2vw;

    user-select: none;
    cursor: pointer;
}

section ul li p:last-child {
    font-size: 3vw;
    font-weight: 300;
    text-align: center;
    user-select: none;
}

.fontcolor {
    color: #333;
}

.pselect {
    background-color: #FB902B;
    color: #FFF;
}

/*********************** bottom-btn ***********************/
.bottom-btn {
    width: 100%;
    height: 12vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    bottom: 14.2vw;

    display: flex;
}

.bottom-btn div:first-child {
    flex: 2;
}

.bottom-btn div:last-child {
    flex: 1;
    background-color: #117C94;
    text-align: center;
    line-height: 12vw;
    font-size: 5vw;
    color: #FFF;

    user-select: none;
    cursor: pointer;
}
</style>